<template>
  <view @click="handleClick" class="tag"
    :style="{ border: '1px solid' + (borderColor ? borderColor : type(props.type)), color: type(props.type), fontSize: props.size + 'rpx' }">
    {{
      props.title }}
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'


const props = defineProps<{
  // 标题
  title: string
  // 类型
  type?: string
  // 边框颜色（传了代表没有边框了）
  borderColor?: string
  // 大小
  size: {
    type: [String, Number],
    required: false,
    default: 50
  }
}>()

// 根据类型切换不同的颜色
const type = ((type: string) => {
  let typeColor = ''
  switch (type) {
    case 'Success':   // 成功
      typeColor = '#67c23a'
      break;
    case 'Info':      // 信息
      typeColor = '#909399'
      break;
    case 'Warning':   // 警告
      typeColor = '#e6a23c'
      break;
    case 'Danger':    // 危险
      typeColor = '#f56c6c'
      break;
    case 'Transparent':    // 透明色
      typeColor = 'transparent'
      break;
    default:    // 默认Primary  主要的
      typeColor = '#409eff'
      break;
  }
  return typeColor
})


const emit = defineEmits(['click'])

// 点击事件
const handleClick = () => {
  emit('click')
}
</script>

<style lang="scss" scoped>
.tag {
  padding: 7rpx 25rpx;
  font-size: 30rpx;
  border-radius: 7rpx;
}
</style>